<template>
	<view class="content">
		<view class="write">
			<view class="write-content">
				<image src="../../static/commodity/common13.png" mode=""></image>
			</view>
			<view class="write-content2">
				<view class="write-content2-title">这里是商品标题这里是商品标题这里是商品标题</view>
				<view class="write-content2-fen">商品分类</view>
				<view class="write-content2-jin">
					<view class="write-content2-jin">￥2839.92</view>
					<view class="write-content2-jin2">x<span>1</span></view>
				</view>
			</view>
		</view>
		<!-- 五星 -->
		<view class="xing">
			<view class="xing-five" v-model="evaluateType">
				
				<view class="xing-five-img">
					<!-- <image src="../../static/commodity/common14.png" mode=""></image>
					<image src="../../static/commodity/common14.png" mode=""></image>
					<image src="../../static/commodity/common14.png" mode=""></image>
					<image src="../../static/commodity/common14.png" mode=""></image>
					<image src="../../static/commodity/common14.png" mode=""></image> -->
					<uni-rate v-model="value" @change="onChange" :size="25"/>
				</view>
				<view class="xing-five-name">
					如果满意请给五星好评哦~
				</view>
			</view>
			<view class="xing-name">
				<textarea class="xing-name1" v-model="evaluateInfo" placeholder="商品怎么样？说一下您的感受吧~" />
				<!-- <view class="xing-name1">商品怎么样？说一下您的感受吧~</view> -->
				<view class="bottom-img">
					<view class="xing-name3" v-for="item in imgs1">
						<image :src="item" mode=""></image>
					</view>
					<view class="xing-name2">
						<span>添加图片</span>
					<image src="../../static/tian.png" mode=""  @tap="onGetImgClick"></image>
					</view>
					
				</view>
				
			</view>
		</view>
		<!-- 提交 -->
		<view class="bottom-btn" @click="newPinglun">提交评论</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs1:[],
				content:'',
				commodityId:'',// 商品id,
				evaluateType:'',// 评价类型（好评、差评
				evaluateInfo:'',// 评论信息
				 value: 1
			};
		},
		onLoad(options) {
			this.commodityId=options.commodityId
		},
		methods: {
			 onChange(e) {
			            console.log('rate发生改变:' + JSON.stringify(e))
			        },
			onGetImgClick() {
				const that = this
				uni.chooseImage({
					count: 6, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function (res) {
						that.imgs1 = res.tempFilePaths
						console.log(res,that.imgs1,'**********')
						that.goImgs()
						
					}
				})
			},
			goImgs() {
				var that = this
				that.$http.req.ajax({
				     path: ':8069/common/upload',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
					 evaluateImg:that.imgs1
				     },
				     afterAjax: (res) => {
						 		console.log(res,'图片接口')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				// title: res.msg,
										title: '返图片错误',
						 				icon: 'none'
						 			})
						 			console.log(res.msg,'新增图片拿到')
						 		}
						 		if (res.code == 200) {
						 			console.log('新增图片通了')
									uni.showToast({
										title: '已点赞',
										icon: 'none'
									})
						 		}
								 
				     }
				    })
			},
			// 新增商品评论
			newPinglun() {
				var that = this
				that.$http.req.ajax({
				     path: ':8069/web/mall/evaluateAdd',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     commodityId: that.commodityId,// 商品ID
					 evaluateInfo: that.evaluateInfo,// 评论信息
					 evaluateScore: that.value, // 新增商品评论
					 evaluateImg:that.imgs1
				     },
				     afterAjax: (res) => {
						 		console.log(res,'新增商品评论接口')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				// title: res.msg,
										title: '提交评论错误，稍后重试',
						 				icon: 'none'
						 			})
						 			console.log(res.msg,'新增商品评论拿到')
						 		}
						 		if (res.code == 200) {
						 			console.log('新增商品评论通了')
									uni.showToast({
										title: '日内瓦退钱',
										icon: 'none'
									})
						 		}
								 
				     }
				    })
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
.content {
	width: 722rpx;
	margin: 0 auto;
	// position: relative;
	background-color: #f5f5f5;
	height: 100%;
	.write {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 25rpx;
		background-color: #FFFFFF;
		border-radius: 14rpx;
		.write-content {
			margin: 25rpx;
			width: 231rpx;
			height: 231rpx;
			image {
				max-width: 100%;
				max-height: 100%;
			}
		}
		.write-content2 {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 25rpx 25rpx 25rpx 0;
			.write-content2-title {
				font-size: 25rpx;
				font-weight: 600;
			}
			.write-content2-fen {
				font-size: 18rpx;
				margin-top: 14rpx;
				color: #9f9a7f;
			}
			.write-content2-jin {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.write-content2-jin {
					font-size: 25rpx;
					color: #eb3e3e;
					font-weight: 600;
				}
			}
			.write-content2-jin2 {
				font-size: 10rpx;
				color: #989898;
				span {
					font-size: 25rpx;
					font-weight: 600;
				}
			}
		}
	}
	// 五星
	.xing {
		margin: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: #FFFFFF;
		.xing-five {
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			border-bottom: 1rpx solid #f5f5f5;
			.xing-five-img {
				margin: 0 auto;
				padding-top: 43rpx;
				width: 362rpx;
				padding-left: 100rpx;
				height: 57rpx;
				image {
					width: 57rpx;
					height: 57rpx;
				}
			}
			.xing-five-name {
				font-size: 21rpx;
				padding-bottom: 57rpx;
				color: #868686;
				margin: 0 auto;
				margin-top: 25rpx;
				padding-left: 45rpx;
			}
		}
		.xing-name {
			margin: 25rpx;
			.xing-name1 {
			font-size: 25rpx;
			color: #8d8d8d;
			}
			.xing-name1 {
				height: 200rpx;
			}
			.bottom-img {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
			}
			.xing-name2 {
				margin-top: 20rpx;
				width: 200rpx;
				height: 200rpx;
				span {
					font-size: 25.36rpx;
					font-weight: 600;
				}
				image {
					max-width: 60%;
					max-height: 60%;
				}
			}
			.xing-name3 {
				flex: 3;
				max-width: 200rpx;
				max-height: 200rpx;
				margin: 0 20rpx;
				flex-wrap: wrap;
				flex-direction: row;
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
		
	}
	// 提交
	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 699rpx;
		margin: 0 25rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background-color: #fcda22;
		font-size: 25rpx;
		border-radius: 44rpx;
		text-align: center;
		height: 79rpx;
		line-height: 79rpx;
	}
}
</style>
